<template>
	<view>
		<view class="index-header" style="--circleWidth: 100rpx" :style="{height: contentHeight + 'px'}">
			<!-- 渐变背景 -->
			<view class="aspect">
				<view class="aspect-wrap">
					<!-- <view class="header-bg" :style="{ background: bgColor }"></view> -->
					<view class="header-bg img-bg"
						:style="{ background: `url(${$wanlshop.oss(appStyle.home_nav_image)})` }"></view>
					<!-- <view class="header-bg img-bg" :style="{ background: `url(${bgColor})` }"></view> -->
				</view>
			</view>

			<!-- 轮播图外侧容器 -->
			<!-- <view class="swiper-out">
				<view class="swiper-out-content"
					:style="{ '--rotate': rotate + 'deg', '--time': transition_time + 's' }">
					<view class="swiper-out-content-wrap"
						:style="{ transform: `translateX(-50%) rotateZ(calc(180deg / ${swiperList.length} * ${index}))` }"
						v-for="(item, index) in swiperList" :key="item.id">
						<view class="item-aspect">
							<view class="item-aspect-wrap">
								<view class="item" :style="{ backgroundColor: item.backgroundColor }"></view>
							</view>
						</view>
					</view>
				</view>
			</view> -->

			<!-- 轮播菜单 -->
			<view class="swiper-round" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
				<view class="swiper-content">
					<view class="swiper-round-wrap"
						:style="{ '--rotate': rotate + 'deg', '--time': transition_time + 's' }">
						<view class="swiper-round-item" :class="currentTab == index ? 'active' : ''"
							:style="{ transform: `translateX(-50%) rotateZ(calc(180deg / ${swiperList.length} * ${index}))` }"
							@tap="item_tap(item.id,index)" v-for="(item, index) in swiperList" :key="item.id">
							<view class="text">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="content">

				<!-- 头部标题 -->
				<!-- <view class="header-title">
					<image src="../../static/images/default/arc.png" mode="widthFix"></image>
					<text>RECOMMONED</text>
				</view> -->

				<!-- 菜单 -->
				<view class="classify-list">
					<view class="item" @tap="$emit('toAnchor',item.id)" v-for="(item, index) in classify"
						:key="item.id">
						<view class="classify-img bg-img"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image, 0, 0, 1) + ')' }">
						</view>
						<text class="name">{{ item.name }}</text>
					</view>
				</view>

				<!-- 活动列表 -->
				<view class="activity-list">
					<view class="item" v-for="(item, index) in activityList" :key="item.id" @tap="toActivity(item)"
						:style="{ background: `url(${$wanlshop.oss(item.bg_image)})`}">
						<view class="title">{{ item.title }}</view>
						<view class="desc">
							<view>{{ item.desc }}</view>
							<span>＞</span>
						</view>
						<image class="activity-bg" :src="item.background" mode="widthFix"></image>
					</view>
				</view>

				<!-- 活动公告栏 -->
				<view class="notice" @click="$wanlshop.on('/pages/activity_home')">
					<image style="width: 34rpx; height: 34rpx;" src="/static/images/default/notice-dark.png"
						mode="aspectFit"></image>
					<swiper class="swiper-notice" :indicator-dots="false" :autoplay="true" circular :interval="10000"
						:duration="1000">
						<swiper-item v-for="(item, index) in noticeList" :key="index">
							<view class="swiper-item" @tap="">
								<text>{{ item.title }}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "index-header",
		props: {
			appStyle: {
				type: Object,
				default: function() {
					return {}
				}
			},
			pageData: { // 菜单列表
				type: Array,
				default: function() {
					return {
						data: []
					}
				}
			},
			noticeList: { // 公告列表
				type: Array,
				default: function() {
					return {
						data: []
					}
				}
			},
			activityList: { // 活动列表
				type: Array,
				default: function() {
					return {
						data: []
					}
				}
			}
		},
		data() {
			return {
				bgColor: '',
				currentTab: 0, // 当前轮播图索引
				startX: 0,
				move_old: 0, // 上一次滑动距离
				rotate: 0, // 旋转角度
				transition_time: 0, // 旋转动画时长
				contentHeight: 0, // 内容高度
				doneRequest: 0, // 已完成请求
				// allRequest: 0, // 所有请求
			};
		},
		watch: {
			appStyle(n, o) {
				// console.log('appStyle_new', n)
				// this.allRequest++;
				if (n) this.doneRequest++;
				// console.log('doneRequest', this.doneRequest)
			},
			noticeList(n, o) {
				// console.log('noticeList', n)
				// this.allRequest++;
				if (n) this.doneRequest++;
				// console.log('doneRequest', this.doneRequest)
			},
			activityList(n, o) {
				// console.log('activityList', n)
				// this.allRequest++;
				if (n) this.doneRequest++;
				// console.log('doneRequest', this.doneRequest)
			},
			doneRequest(n, o) {
				uni.createSelectorQuery().in(this).select('.content').boundingClientRect(data => {
					// console.log('createSelectorQuery', data)
					this.contentHeight = data.height;
					// console.log('this.contentHeight', this.contentHeight)
				}).exec()

				// if (n == this.allRequest) {
				// 获取内容高度
				setTimeout(() => {
					uni.createSelectorQuery().in(this).select('.content').boundingClientRect(data => {
						// console.log('createSelectorQuery', data)
						this.contentHeight = data.height;
						// console.log('this.contentHeight', this.contentHeight)
					}).exec()
				}, 0)
				// }
			}
		},
		computed: {
			swiperList: function() {
				console.log('swiperList', this.pageData)
				let list = [...this.pageData]
				// 剔除 为你推荐 类目
				list = list.filter(item => item.name != '为你推荐')
				list = list.splice(0,6); // 截取6个数据
				list = [{
					id: 0,
					name: '六只花狗'
				}, ...list]

				// 计算轮播图每个子项的角度区间(位置)
				list.forEach((item, index) => {
					// 每项中心角度
					item.deg = (180 / list.length) * index;
					// 每项最小角度
					item.minDeg = (((180 / list.length) * index) - ((180 / list.length) / 2));
					// 每项最大角度 -0.01: 避免边界值
					item.maxDeg = (((180 / list.length) * index) + ((180 / list.length) / 2)) - 0.01;
				})

				// 添加圆球背景颜色
				list.forEach((item, index) => {
					if (index % 2 == 0) {
						item.backgroundColor = '#fff2b0';
					} else {
						item.backgroundColor = '#ffe6e6';
					}
				})

				// console.log('list',list)
				return list;
			},
			classify: function() {
				let list = [...this.pageData];
				// 剔除 为你推荐 类目
				list = list.filter(item => item.name != '为你推荐')
				list = list.splice(0,6); // 截取6个数据
				return list;
			},
		},
		mounted() {},
		methods: {
			// 前往活动页
			toActivity(item) {
				this.$api.post({
					loadingTip: '加载中',
					url: `/wanlshop/activity/detail`,
					data: {
						type: 'home',
						type_id: item.id
					},
					success: result => {
						uni.navigateTo({
							url: `/pages/page/activityPage`,
							success: (res) => {
								res.eventChannel.emit('data', {
									activity: result?.title,
									productList: result?.categories || [],
									headerImage: result?.header_img,
									footerImage: result?.footer_img,
								})
							}
						})
					}
				})
			},

			touchStart(e) {
				// 触摸开始时记录触摸点位置
				this.startX = e.touches[0].clientX;
				this.transition_time = 0;
			},

			touchMove(e) {
				// 防止点击误触发
				if (e.touches[0].clientX == 0) return;

				// 本次滑动距离	
				let move_now = Math.abs(e.touches[0].clientX - this.startX);
				// console.log('本次滑动距离', move_now)

				// 滑动距离转换为角度  /50: 旋转速度 (越小越快)
				let deg = (e.touches[0].clientX - this.startX) / 100;
				// console.log('deg', Number(deg))

				if (move_now > this.move_old) {
					// 设置最大、最小旋转角度
					if (-this.rotate >= 180 || this.rotate >= 180 / this.swiperList.length) return;

					// 本次滑动距离 > 上次滑动距离 增加旋转角度
					this.rotate += Number(deg);

				} else {
					// 本次滑动距离 < 上次滑动距离 减小旋转角度
					this.rotate -= Number(deg);
				}

				// 保存本次滑动距离
				this.move_old = move_now;
			},

			touchEnd(e) {
				// 防止点击误触发
				if (this.move_old == 0) return;

				this.transition_time = 0.1;

				// 重置滑动距离
				this.move_old = 0;

				this.swiperList.forEach((item, index, arr) => {
					// 设置转盘至当前最近的子项
					if (Math.abs(this.rotate) > item.minDeg && Math.abs(this.rotate) < item.maxDeg) {
						this.currentTab = index;
						// console.log('index', index)
						this.rotate = -item.deg;

						// 跳转锚点
						if (index == 0) return;
						this.$emit('toAnchor', item.id)
					}

					// 旋转角度超出最小范围 设置为第一项
					if (-this.rotate <= 0) {
						this.currentTab = 0;
						// console.log('index', this.currentTab)
						this.rotate = -arr[0].deg;
					}

					// 旋转角度超出最大范围 设置为最后一项
					if (-this.rotate >= arr[arr.length - 1].maxDeg) {
						this.currentTab = [arr.length - 1];
						// console.log('index', this.currentTab)
						this.rotate = -arr[arr.length - 1].deg;
					}
				})
			},

			// 点击轮播图子项: 旋转轮播图 跳转锚点
			item_tap(id, index) {
				this.currentTab = index;
				// console.log('item_handle', id)
				this.swiperList.forEach((item, index, arr) => {
					if (item.id == id) {
						// console.log('item', item)
						this.rotate = -item.deg;
						this.$emit('toAnchor', item.id)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.index-header {
		position: relative;
		// border: 2px solid black;
		width: 100%;
		overflow: hidden;

		// 轮播图子项数量  **** 应动态传入, bug:动态传入css变量会导致scss无法遍历 *****
		// $swiperItemNum: var(--swiperItemNum);

		// 轮播图外侧圆形的宽度
		$circleWidth: var(--circleWidth);


		// 保持容器纵横比
		.aspect {
			width: 100%;
			height: 100%;
			position: absolute;
			// top: calc(#{$circleWidth});
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			overflow: hidden;
			// margin-bottom: 270rpx;

			/* #ifdef MP */
			// margin-bottom: 250rpx;
			/* #endif */

			.aspect-wrap {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				padding-top: 140%;
				// border: 2px solid blue;

				// 背景
				.header-bg {
					opacity: 1;
					position: absolute;
					top: 0%;
					left: 50%;
					transform-origin: top center;
					transform: translateX(-50%) scaleX(1.4);
					width: 100%;
					height: 100%;
					// background: linear-gradient(to bottom, #4bfd75 0%, #ffffff 100%);
					border-radius: 50% 50% 0 0;

					// border: 3px solid purple;
					background-size: cover !important;
					background-position: top center !important;
					background-repeat: no-repeat !important;

					box-shadow: inset 0 -200rpx 80rpx -100rpx #fff;
					border: 3px solid #C1834A;

					&::after {
						content: '';
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						top: -2rpx;
						width: 0rpx;
						border: 10rpx solid transparent;
						border-top: 14rpx solid #C1834A;
					}
				}
			}
		}

		.swiper-out {
			position: absolute;
			top: calc(#{$circleWidth} / 2);
			left: 50%;
			width: 100%;
			transform-origin: top center;
			transform: translateX(-50%) scale(1.4);
		}

		.swiper-out-content {
			position: absolute;
			top: 0;
			left: 50%;
			width: 100%;
			padding-bottom: 100%;
			transform: translateX(-50%) rotateZ(#{var(--rotate)});
			border-radius: 50%;
			// background-color: #ff000060;
			transition: transform #{var(--time)} ease-out;
			z-index: 0;

			// 原点
			/* &::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 5rpx;
			height: 5rpx;
			background-color: rgb(170, 0, 255);
			border-radius: 50%;
		} */

			.swiper-out-content-wrap {
				position: absolute;
				top: 0%;
				left: 50%;
				padding-bottom: 50%;
				transform: translateX(-50%) rotateZ(0deg);
				transform-origin: 50% 100%;
				// background-color: #3cff0080;
				// overflow: hidden;
				width: 140rpx;

				.item-aspect {
					position: absolute;
					// top: calc(-#{$circleWidth} / 1.8);
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					width: $circleWidth;

					.item-aspect-wrap {
						padding-top: 100%;

						.item {
							position: absolute;
							width: 100%;
							height: 100%;
							top: 0;
							left: 0;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
							padding-bottom: 20rpx;
							box-sizing: border-box;
						}
					}
				}
			}
		}

		/* 转盘 */
		.swiper-round {
			position: absolute;
			top: 0%;
			left: 50%;
			width: 100%;
			height:calc(#{$circleWidth}*1.5);
			z-index: 3;
			transform: translateX(-50%);
			// border: 3px solid white;
			overflow: hidden;

			.swiper-content {
				position: absolute;
				// top: calc(#{$circleWidth} / 2);
				top: 0;
				left: 50%;
				width: 100%;
				transform-origin: top center;
				transform: translateX(-50%) scale(1.4);
			}

			// 转动部分
			.swiper-round-wrap {
				position: absolute;
				top: 0;
				left: 50%;
				width: 100%;
				padding-bottom: 100%;
				transform: translateX(-50%) rotateZ(#{var(--rotate)});
				border-radius: 50%;
				// background-color: #0df7ff30;
				transition: transform #{var(--time)} ease-out;

				// 原点
				/* &::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 5rpx;
				height: 5rpx;
				background-color: red;
				border-radius: 50%;
			} */
			}

			.swiper-round-item {
				position: absolute;
				top: 0%;
				left: 50%;
				padding-bottom: 50%;
				transform: translateX(-50%) rotateZ(0deg);
				transform-origin: 50% 100%;
				// background-color: #ad4bfd30;
				// overflow: hidden;
				width: 140rpx;

				.text {
					position: absolute;
					top: 30rpx;
					font-size: 20rpx;
					color: #3d3d3d;
					white-space: nowrap;
					width: 100%;
					text-align: center;
				}

				&.active {
					.text {
						font-weight: bold;
					}
				}
			}
		}

		/* 内容区: 标题、菜单、活动列表 */
		.content {
			opacity: 1;
			position: absolute;
			top: 0rpx;
			left: 0;
			width: 100%;
			padding-top: calc(#{$circleWidth}*1);
			// background-color: #ff000050;
			z-index: 2;
			// border: 3px solid white;

			.header-title {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
				padding: 0 20%;
				// background-color: pink;

				image {
					width: 100%;
					display: block;
				}

				text {
					color: #ffffff;
					font-size: 28rpx;
					position: absolute;
					bottom: 8%;
				}
			}

			// 分类菜单
			.classify-list {
				position: relative;
				z-index: 1;
				box-sizing: border-box;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx 50rpx;
				padding: 50rpx 24rpx 10rpx;

				.item {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					gap: 10rpx;
					// border: 1px solid red;

					.classify-img {
						width: 140rpx;
						height: 140rpx;
						border-radius: 16rpx;
						box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
						overflow: hidden;

						image {
							width: 100%;
						}
					}

					.name {
						font-size: 32rpx;
					}
				}
			}

			// 活动列表
			.activity-list {
				position: relative;
				z-index: 1;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 14rpx;
				padding: 10rpx 24rpx 0rpx;
				box-sizing: border-box;
				width: 100%;
				min-width: 0;

				.item {
					width: 100%;
					border-radius: 8rpx;
					background-color: green;
					padding: 15rpx 20rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
					background-size: cover !important;
					background-position: center !important;
					position: relative;
					min-width: 0;

					.title {
						font-size: 30rpx;
						margin-bottom: 8rpx;
						font-weight: bold;
						position: relative;
						z-index: 1;
						white-space: nowrap;
						width: 100%;
						overflow: hidden;
					}

					.desc {
						display: flex;
						align-items: center;
						gap: 16rpx;
						font-size: 24rpx;
						position: relative;
						z-index: 1;

						view {
							white-space: nowrap;
							width: 100%;
							overflow: hidden;
						}
					}

					.activity-bg {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						z-index: -1;
					}
				}
			}

			// 活动公告栏
			.notice {
				height: 60rpx;
				margin: 20rpx 24rpx;
				display: flex;
				align-items: center;
				gap: 10rpx;
				border-radius: 8rpx;
				// background: linear-gradient(to right, #ed4d31 -10%, #f97e38 50%);
				background-color: #EFDFCF;
				padding: 0 14rpx;
				color: #512D0D;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);

				.swiper-notice {
					width: 100%;
					height: 100%;

					.swiper-item {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;

						text {
							width: 90%;
							font-size: 26rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
</style>